<template>
  <div>
    <headTop></headTop>
    <div style="height: 70px;"></div>



    <div style="position: relative;" class="price-main">
      <div class="pbanner">
        <div class="banner_tip">
          <div class="ba_t">Global mobile advertising strategy analysis platform</div>
          <div class="ba_b">Select the most suitable advertising strategy analysis plan for you</div>
        </div>
        </div>
        <div class="w  table-main-price">
          <table cellspacing="0" cellpadding="0" class="ago-page-price__table  value-table">
            <thead>
              <tr>
                <th class="ago-page-price__table-th noto-sans-medium"></th>
                <th class="ago-page-price__table-th noto-sans-medium">
                   <div style="" class="head_div">
                      <img src="../../assets/image/pl1.png"  />
                      App Store
                   </div>
                </th>
                <th class="ago-page-price__table-th noto-sans-medium">
                  <div style="" class="head_div">
                    <img src="../../assets/image/pl2.png"  />Google Play
                   </div>
                </th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>Direct Installs</td>
                <td>
                    <div>$0.10</div>
                    <div>per install</div>                </td>
                <td>
                  <div>$0.10</div>
                  <div>per install</div>
                </td>
              </tr>
              <tr>
                <td>Keywords Installs</td>
              <td>
                <div>$0.12</div>
                <div>per install</div>
              </td>
                <td>
                  <div>$0.12</div>
                  <div>per install</div>
                </td>
              </tr>
              <tr>
                <td>Guarantee Keyword Ranking</td>
                <td>
                    <div>based on target ranking</div>
                    <div>( Refund if not achieved )</div>
                </td>
                <td>
                    <div>based on target ranking</div>
                    <div>( Refund if not achieved )</div>
                </td>
              </tr>
              <tr>
                <td>Guarantee App Ranking</td>
                <td>
                    <div>based on target ranking</div>
                    <div>( Refund if not achieved )</div>
                </td>
                <td>
                    <div>based on target ranking</div>
                    <div>( Refund if not achieved )</div>
                </td>
              </tr>
              <tr>
                <td>Ratings and Reviews</td>
                <td>-</td>
                <td>-</td>
              </tr>
              <tr>
                <td>Keyword Basic Optimization</td>
                <td>
                  <div>$100</div>
                  <div>per store/language</div>                </td>
                <td>
                  <div>$100</div>
                  <div>per store/language</div>
                </td>
              </tr>
              <tr>
                <td>Apple Search Ads Services</td>
                <td>
                    <div>5% * Ad Spend</div>                    <div>Management Fee</div>

                </td>
                <td>-</td>
              </tr>

            </tbody>
          </table>

        </div>

        <div class="area_country" style="padding: 60px 0;">
            <!-- <div class="area_country_title">
              <div class="ba_t">Global Available</div>
            </div> -->

            <div class="w  table-main-price country-table" style="position: relative;padding-top: 0;">
              <div class="global-title" style="">Global Available</div>
              <table cellspacing="0" cellpadding="0" class="ago-page-price__table" >
               <thead>
                  <tr>
                    <th class="ago-page-price__table-th noto-sans-medium" style="text-align: center;"  rowspan="2"></th>
                    <th class="ago-page-price__table-th noto-sans-medium" ></th>
                  </tr>
                </thead>
               <tbody>
                  <tr v-for="item in listCountry">
                    <td style="width: 30%;text-align: center;" >
                      <div>
                            {{item.title_en}}
                      </div>
                    </td>
                    <td style="width: 70%;text-align: left;">
                      <div v-for="item2 in item.data"  class='country-item'>
                          <country-flag :country="item2.tag" size="normal" class="default_flag" />
                      </div>
                    </td>
                  </tr>
                </tbody>
              </table>

            </div>

        </div>





    </div>







    <footerBottom></footerBottom>



  </div>



</template>

<script>
  import headTop from '../common/head.vue';
  import footerBottom from '../common/footer.vue';
  import   listCountry  from '@/utils/country/list';

  export default {
    name: 'Price',
    components: {
      footerBottom,
      headTop
    },
    data() {
      return {
        listCountry:listCountry
      }


    },
    mounted() {
      console.log(listCountry)
    }




  }
</script>

<style>
</style>
